/*
* @Date: 2021/3/28
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import '@/scss/fonts/iconfont';
import './index.scss';
import Icon from '@/components/Icon';
import Source from './Source';


class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: 'ziyuan',
    };
  }

  onTabChange = (e) => {
    const { tab } = e.currentTarget.dataset;
    this.setState({
      tab
    });
  }

  render() {
    const { tab } = this.state;
    return (
      <div className="user-workbench-box">
        <div className="user-workbench-header">

        </div>
        <div className="user-workbench-content">
          <div className="user-workbench-tab">
            <div
              className={`user-workbench-tab-item ${tab === 'ziyuan' ? 'active' : ''}`}
              onClick={this.onTabChange}
              data-tab="ziyuan"
            >
              <Icon type="ziyuan" />
            </div>
            <div
              className={`user-workbench-tab-item ${tab === 'data' ? 'active' : ''}`}
              onClick={this.onTabChange}
              data-tab="data"
            >
              <Icon type="diejia" />
            </div>
          </div>
          <div className="user-workbench-tab-content">
            {
              tab === 'ziyuan' && (
                <Source />
              )
            }
          </div>
        </div>

      </div>
    )
  }
}

ReactDOM.render(
  <Page/>,
  document.getElementById('root')
)
